import { createApp } from 'vue'
//引入状态管理pinia
import { createPinia } from "pinia"
//引入路由
import router from "./router/index"
import App from './App.vue'
// 持久化存储
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"
// element-plus组件库
import ElementPlus from 'element-plus'
// element-plus组件库的样式
import 'element-plus/dist/index.css'
// 
import '@/assets/styles/elstyles.css'

// 引入nprogress的css
import "nprogress/nprogress.css"
// 引入公告样式
import '@/assets/styles/common.css'
// 引入发起请求菜单数据的方法
import useMenu from "@/store/menulist.js"
// 引入usersStore
import usesUsers from "@/store/users.js"

// import  "@/flat.js"

let app = createApp(App)

let pinia = createPinia();
//Pinia使用持久化存储
pinia.use(piniaPluginPersistedstate);

//路由钩子(全局前置守卫)

router.beforeEach(async (to, from) => {
    //to目标路由对象
    //from 源路由对象
    // console.log('to---', to)
    // console.log('from---', from)

    //返回false 终止导航 页面不加载

    // if (to.path !== '/login') {
    //     return {
    //         path: "/login"
    //     }
    // }

    //用户如果登入了,那么允许访问其他页面

    //判断sessionStorage中是否有token

    let token = sessionStorage.getItem('tk');

    if (!token) {
        //用户如果没有登入,用户访问其他页面一律跳转到登入页

        //如果访问的是登入页,什么也不做,通过就行,如果不是,那么就要跳转回登入页

        if (to.path !== "/login") {
            return {
                path: "/login"
            }
        }

    }else{
        // 已经登录 发起store中的请求菜单数据的方法
        let menuStore = useMenu();

        // 调用方法发起请求菜单数据
        // 判断是否有菜单数据
        if(menuStore.menulist.length<1){
            // 没有菜单数据
            await menuStore.getMenuList()
            // return {path:to.path,query:to.query,params:to.params}
            // 这句代码的含义就是废弃之前的导航，因为之前的导航动态添加的路由还没有被添加尽量容易造成404
            // 会重新激活路由配置，匹配动态添加之后的路由
            // return {path:to.path,query:to.query,params:to.params}
            await router.replace(to.path)
        }

    }
})
// 全局后置钩子
router.afterEach((to,from)=>{
    let usersStore= usesUsers()
    // 获取matched匹配到的数据，生成面包屑需要的数据
    // 确保动态路由再废弃上一个404路由的时候，面包屑不被重新赋值
    if(to.meta.key){
        usersStore.breadCrumbList = to.matched.filter(item=>{
            return item.path !== '/'
        })
    }


})

//使用路由
app.use(router)
app.use(pinia)
app.use(ElementPlus)

app.mount('#app')
